<template>
  <div class="innerPageTable-out-flex nacos_list">
    <NameSpace @clickNamespace="clickNamespace"></NameSpace>
    <SelfAdaption>
      <Form slot="adaption-bar" label-position="top" inline class="ivu-form-no-margin-bottom" :model="searchForm">
        <Form-item :label="$t('module.configureList.dataId')">
          <Input
            v-model.trim="searchForm.dataId"
            :placeholder="$t('module.configureList.placeholder.input')"
            @on-enter="searchInfo"
            type="text"
          />
        </Form-item>
        <Form-item :label="$t('module.configureList.group')">
          <Input
            v-model.trim="searchForm.group"
            :placeholder="$t('module.configureList.placeholder.input')"
            @on-enter="searchInfo"
            type="text"
          />
        </Form-item>
        <Form-item :label="$t('module.configureList.belongApp')">
          <Input
            v-model.trim="searchForm.appName"
            :placeholder="$t('module.configureList.placeholder.appName')"
            @on-enter="searchInfo"
            type="text"
          />
        </Form-item>
        <Form-item :label="$t('module.configureList.configTags')">
          <Select
            :placeholder="configTagList.length ? '请选择' : '请输入标签'"
            :value="configTags"
            filterable
            multiple
            allow-create
            @on-create="handleCreate"
            @on-change="handleChange"
          >
            <Option v-for="item in configTagList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </Form-item>
        <Form-item prop="button" class="search-solt-btn">
          <RPButton optType="search" @click="searchInfo" />
          <RPButton optType="reset" @click="formReset" />
        </Form-item>
      </Form>
    </SelfAdaption>
    <InnerPageTable ref="configureListTable" :config="pageTableConfig">
      <div slot="table-bar">
        <RPButton optType="create" @click="addHandle" />
      </div>
    </InnerPageTable>
  </div>
</template>

<script>
import { generateColumns } from "./colomns";
import locales from "./locales";
import { nacosConfigApi } from "@/api/nacosList";
import configureDetail from "./detail";
import deleteConfigPop from "./deleteConfigPop";
// import moreBtn from "./moreBtn";

export default {
  name: "index.vue",
  mixins: [locales],
  // components: {
  //   moreBtn
  // },
  data() {
    return {
      pageTableConfig: {
        loadDataFn: this.getUserListPage,
        columns: generateColumns.bind(this)(),
        autoFirst: false
        // initParam: {
        //   namespaceId: ""
        // }
      },
      searchForm: {
        namespaceId: "",
        dataId: "",
        group: "",
        appName: "",
        configTags: []
      },
      configTags: [],
      nameSpaceList: [],
      configTagList: [],
      configTagsCopy: [],
      components: {
        // configureDetail
      }
    };
  },
  created() {},
  methods: {
    handleCreate(val) {
      this.configTagList.push({
        value: val,
        label: val
      });
    },
    handleChange(val) {
      this.configTagsCopy = val;
    },
    addHandle() {
      new this.$pageModal(
        configureDetail,
        {
          props: {
            handleType: "add",
            namespaceId: this.searchForm.namespaceId
          }
        },
        data => {
          if (data) this.searchInfo();
        }
      );
    },
    clickNamespace(val) {
      this.searchForm.namespaceId = val;
      this.$nextTick(() => {
        this.searchInfo();
      });
    },
    searchInfo() {
      const params = { ...this.searchForm };
      params.configTags = this.configTagsCopy.join(",");
      if (params.dataId.includes("*") || params.group.includes("*")) {
        params.search = "blur";
      } else {
        params.search = "accurate";
      }
      this.$refs.configureListTable.load(params);
    },
    formReset() {
      for (let key of Object.keys(this.searchForm)) {
        if (key !== "namespaceId") {
          this.searchForm[key] = "";
        }
      }
      this.configTags = [];
      this.configTagsCopy = [];
      this.searchInfo();
    },
    getUserListPage(tableObj) {
      const { responseProcess, param } = tableObj;
      return nacosConfigApi.getConfigList(param).then(res => {
        responseProcess(res.data);
      });
    },
    detailHandle(row) {
      new this.$pageModal(configureDetail, {
        props: {
          row: row,
          handleType: "detail"
        }
      });
    },
    editHandle(row) {
      new this.$pageModal(
        configureDetail,
        {
          props: {
            row: row,
            handleType: "edit",
            namespaceId: this.searchForm.namespaceId
          }
        },
        data => {
          if (data) this.searchInfo();
        }
      );
    },
    deleteHandle(row) {
      new this.$pageModal(
        deleteConfigPop,
        {
          props: {
            row
          }
        },
        data => {
          if (data) {
            this.searchInfo();
          }
        }
      );
    },
    moreHandle(e, row) {
      this.$router.push({
        name: e,
        query: {
          namespaceId: row.namespaceId,
          group: row.group,
          dataId: row.dataId
        }
      });
    }
  }
};
</script>

<style scoped lang="less">
.nacos_list {
  /deep/ .ivu-table-wrapper {
    position: static !important;
  }
}
.operate_box {
  display: flex;
}
</style>
